import React from 'react'
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';
import './index.less'
import { Steps, Picker, List, Button, WhiteSpace } from 'antd-mobile'
// ========================================
const Step = Steps.Step;
const Item = List.Item;
// ========================================
class HmdMain extends React.Component {
	static contextTypes = {
	    router: PropTypes.object.isRequired
  	}
    constructor (props) {
        super(props);
        this.state = {
            educationValue:'3',
            incomeValue:'3',
        };
    }
    render() {
        let that = this;
        // steps
        let stepsArr = [{
            title: '单位信息',
            description: '单位信息'
        }, {
            title: '学历收入',
            description: '学历收入'
        }, {
            title: '联系方式',
            description: '联系方式'
        }].map((s, i) => <Step key={i} title={s.title} />);
        // picker
        let pickers = {
            'education': [
                {label: '研究生及以上', value: '3', title: '最高学历'},
                {label: '本科', value: '2', title: '最高学历'},
                {label: '专科', value: '1', title: '最高学历'},
                {label: '高中及以下', value: '0', title: '最高学历'}
            ],
            'income': [
                {label: '50万元以上', value: '3', title: '税前年收入'},
                {label: '30万至50万', value: '2', title: '税前年收入'},
                {label: '10万至30万', value: '1', title: '税前年收入'},
                {label: '10万及以下', value: '0', title: '税前年收入'}
            ]
        };
        let pickerArr = [];
        for (var key in pickers) {
            (function (key) {
                var arr = pickers[key];
                pickerArr.push(
                    <Picker data={ arr } cols={1}
                            value={that.state[key + 'Value']}
                            onChange={v => {that.setState({ [key + 'Value']: v });}}
                            onOk={v => that.setState({ [key + 'Value']: v })}
                    >
                        <Item arrow="horizontal">{arr[0].title}</Item>
                    </Picker>
                );
            })(key);
        }
        return (
            <div id="infoStepTwo">
                <CommonHeader
                    name='信用贷'
                    leftContentTitle="@back"
                />
                <div style={{paddingTop: '50px'}}></div>
                <Steps current={1} direction="horizontal" size="small"
                       style={{paddingTop: '30px', paddingBottom: '20px', backgroundColor: '#fff'}}>
                    {stepsArr}
                </Steps>
                <div className="infoStepOne-notice">
                    为了您能顺利申请交行惠民贷，请
                    <span className="infoStepOne-notice-yellow">准确填写</span>
                    以下信息
                </div>
                {pickerArr}
                <WhiteSpace size="lg" />
                <div className="btnGroup-one">
				    <Button type="primary" className="btnGroup-one-btn" onClick={()=>{
                            that.context.router.push({
                                pathname: '/HmdMain/InfoStepThree'
                            });
                        }}> 下一步：填写联系方式</Button>
				</div>
            </div>
        );
    }
}
// ========================================
export default HmdMain;